<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- async、await彻底解决了回调地狱，可以让你写出更扁平的异步代码 -->
  <!-- 1.async修饰的函数 默认就是返回一个promise，要拿到结果可以通过.then 来拿到 -->
  <!-- 2.await 必须配合async使用，不能单独使用。但是async可以单独使用 -->
  <!-- 3.await 后面跟的是Promise任务，会等待Promise任务执行完后 继续往下执行 -->
  <!-- 4.await 只能获取到成功的Promise的结果,如果要获取失败结果 需要配合try、catch使用 -->



  <script>
    // <!-- 1.async修饰的函数 默认就是返回一个promise，要拿到结果可以通过.then 来拿到 -->
    // async function fn() {
    //   return 1
    // }
    // // const result = fn()
    // // console.log(result);
    // fn().then(res => {
    //   console.log(res); //1
    // })

    // 2.await 必须配合async使用，不能单独使用。但是async可以单独使用
    // 3.await 后面跟的是Promise任务，会等待Promise任务执行完后 继续往下执行
    // function fn() {
    //   const p = new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       console.log(1);
    //       resolve()
    //     }, 2000);
    //   })
    //   return p
    // }

    // async function fn2() {
    //   console.log(2);
    //   await fn()
    //   console.log(3);
    // }
    // fn2()

    // await 只能获取到成功的Promise的结果,如果要获取失败结果 需要配合try、catch使用
    // await 后面的Promise如果失败 就不会往下执行了
    function fn() {
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1);
          reject('错误了')
        }, 2000);
      })
      return p
    }

    async function fn2() {
      try {
        console.log(2);
        await fn()
        console.log(3);
      } catch (error) {
        console.log(error);
      }
    }
    fn2()
  </script>
</body>

</html>